<template>
  <div class="date-rotate-container">
    <div
      :id="nowDateStr[i - 1] + '_' + (i - 1)"
      :key="nowDateStr[i - 1] + '_' + (i - 1)"
      v-for="i in nowDateStr.length"
      class="number-card"
    >
      <div class="number-item rotateAnimated card-top">
        {{ nowDateStr[i - 1] }}
      </div>
      <div class="number-item card-bottom">{{ nowDateStr[i - 1] }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { parseTime } from "@/utils";
import useAppConfigStore from '@/store/modules/app-config'
import useCssVariable from '@/hooks/useCssVariable'

const appStore = useAppConfigStore()
const color_bg_4_value = useCssVariable("body", "--color-bg-4")

const props = withDefaults(
  defineProps<{
    // 卡片背景颜色
    bgColor?: string;
    // 文字颜色
    textColor?: string;
    // 宽度
    width?: string;
    // 高度
    height?: string;
    // 边框弧度
    borderRadio?: string;
    // 每个字相隔距离
    spaceInterval?: string;
    // 日期格式
    datePattern?: string;
    // 翻页速度
    rotateSpeed?: string;
  }>(),
  {
    bgColor: "",
    textColor: "",
    width: "20px",
    height: "30px",
    spaceInterval: "2px",
    datePattern: "{y}年{m}月{d}日{h}:{i}:{s}星期{a}",
    rotateSpeed: "0.2s",
    borderRadio: "2px",
  },
);

const bgColor = computed(() => props.bgColor || color_bg_4_value);
const textColor = computed(() => props.textColor || appStore.themeColor);

// 计算卡片的高度，因为我一张卡片是用两个div合成的，所以每张卡片高度为一半
const cardHeight = computed(() => {
  return parseInt(props.height) / 2 + "px";
});

const nowDateStr = ref(parseTime(new Date(), props.datePattern).trim());

// 获取当前日期字符串
const timer = setInterval(() => {
  const newDateStr = parseTime(new Date(), props.datePattern).trim();
  nowDateStr.value = newDateStr;
}, 1000);

// 卸载主键前，把timer删除
onBeforeUnmount(() => {
  clearInterval(timer);
});
defineOptions({
  name: "DateRotateComponent",
});
</script>

<style lang="less" scoped>
.date-rotate-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  .number-card {
    .number-item {
      background-color: v-bind(bgColor);
      color: v-bind(textColor);
      width: v-bind(width);
      font-size: v-bind(width);
      font-weight: 700;
      text-align: center;
      height: v-bind(cardHeight);
      overflow: hidden;
      margin-right: v-bind(spaceInterval);
    }
    .card-top {
      line-height: v-bind(height);
      transform-origin: bottom;
      border-radius: v-bind(borderRadio) v-bind(borderRadio) 0 0;
      // border-bottom: 1px solid v-bind(bgColor);
    }
    .card-bottom {
      line-height: 0px;
      border-radius: 0 0 v-bind(borderRadio) v-bind(borderRadio);
      // border-top: 1px solid v-bind(bgColor);
    }
  }
}

@keyframes rotateCard {
  from {
    transform: rotate3d(1, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 180deg);
  }
}
.rotateAnimated {
  animation-name: rotateCard; /* 使用我们定义的动画 */
  animation-duration: v-bind(rotateSpeed); /* 动画时长为0.1秒 */
  animation-iteration-count: 1; /* 动画无限次数执行 */
  animation-timing-function: linear; /* 动画速度匀速变化 */
}
</style>
